<template>
	<div class="slicing-details-box">
		<router-link :to="{ name: 'Slicing' }">
			<el-button type="primary" class="btn-bg-blue btn-box padding-lr-xl" @click="isShowReturn = false" v-if="isShowReturn">返回</el-button>
		</router-link>

		<!-- 浇次节奏 -->
		<pol-title title="浇次节奏"></pol-title>
		<div class="flex align-center padding-lg border-solid bg-tm radius-sm text-white" style="height: 100px;">
			<div class="flex justify-center align-center flex-sub solid-right">
				<span class="text-white2">铸流编号</span>
				<span class="text-lg text-bold margin-left-sm">1</span>
			</div>
			<div class="flex justify-center align-center flex-sub solid-right">
				<span class="text-white2">打号模式</span>
				<span class="text-lg text-bold margin-left-sm">12</span>
			</div>

			<div class="flex justify-center align-center flex-sub solid-right">
				<span class="text-white2">当前拉速</span>
				<span class="text-lg text-bold margin-left-sm">0.6</span>
			</div>

			<div class="flex justify-center align-center flex-sub solid-right">
				<span class="text-white2">切割定尺（m）</span>
				<span class="text-lg text-bold margin-left-sm">6</span>
			</div>

			<div class="flex justify-center align-center flex-sub solid-right">
				<span class="text-white2">切割状态</span>
				<span class="text-lg text-bold margin-left-sm">正在切割</span>
			</div>

			<div class="flex justify-center align-center flex-sub solid-right">
				<span class="text-white2">铸坯长度（m）</span>
				<span class="text-lg text-bold margin-left-sm">5.95</span>
			</div>

			<div class="flex justify-center align-center flex-sub solid-right">
				<span class="text-white2">铸坯状态（t）</span>
				<span class="text-lg text-bold margin-left-sm">10.5</span>
			</div>

			<div class="flex justify-center align-center flex-sub solid-right">
				<span class="text-white2">质量事件数</span>
				<span class="text-lg text-bold margin-left-sm">2</span>
			</div>

			<div class="flex justify-center align-center flex-sub">
				<span class="text-white2">QES结果</span>
				<span class="text-lg text-bold margin-left-sm">合格</span>
			</div>
		</div>

		<!-- 铸流切割示意图 -->
		<pol-title title="铸流切割示意图" class="margin-top"></pol-title>
		<div class="padding-left-lg padding-tb-xl padding-right-xl border-solid bg-tm radius-sm text-white" style="height: 190px;">
			<sketch-map></sketch-map>
		</div>

		<!-- 质量事件列表 -->
		<pol-title title="质量事件列表" class="margin-top"></pol-title>
		<div class="padding border-solid bg-tm radius-sm text-white">
			<pol-table ref="polTableRef" v-bind="tableOpt" height="190px"></pol-table>
		</div>

		<!-- 炉次信息列表 -->
		<pol-title title="炉次信息列表" class="margin-top"></pol-title>
		<div class="padding border-solid bg-tm radius-sm text-white">
			<pol-table ref="polTableRef2" v-bind="tableOpt2" height="420px"></pol-table>
		</div>
	</div>
</template>

<script setup>
	import sketchMap from './components/sketchMap.vue'

	import { ref } from 'vue';

	const isShowReturn = ref(false)
	setTimeout(() => {
		isShowReturn.value = true
	}, 600)

	//表格配置
	const columns = ref([
		{ label: 'ID编号', key: 'ItemCode', align: 'center', width: '100' },
		{ label: '事件名称', key: 'ItemName', align: 'center' },
		{ label: '开始时间', key: 'ItemValue', align: 'center' },
		{ label: '持续时间（s）', key: 'IsDefault', align: 'center' },
		{ label: '影响范围（以尾部为0点）', key: 'P_IsSys', align: 'center' },
		{ label: '影响长度', key: 'P_IsReadOnly', align: 'center' }
	]);

	//表格配置
	const tableOpt = ref({
		columns: columns.value,
		localData: [{
				ItemCode: '03655',
				ItemName: '1#开胶坯头',
				ItemValue: '22-08-23 14:53:16',
				IsDefault: '349',
				P_IsSys: '35.53-37.08',
				P_IsReadOnly: '1.55',
			},
			{
				ItemCode: '03655',
				ItemName: '1#开胶坯头',
				ItemValue: '22-08-23 14:53:16',
				IsDefault: '349',
				P_IsSys: '35.53-37.08',
				P_IsReadOnly: '1.55',
			},
			{
				ItemCode: '03655',
				ItemName: '1#开胶坯头',
				ItemValue: '22-08-23 14:53:16',
				IsDefault: '349',
				P_IsSys: '35.53-37.08',
				P_IsReadOnly: '1.55',
			}, {
				ItemCode: '03655',
				ItemName: '1#开胶坯头',
				ItemValue: '22-08-23 14:53:16',
				IsDefault: '349',
				P_IsSys: '35.53-37.08',
				P_IsReadOnly: '1.55',
			}, {
				ItemCode: '03655',
				ItemName: '1#开胶坯头',
				ItemValue: '22-08-23 14:53:16',
				IsDefault: '349',
				P_IsSys: '35.53-37.08',
				P_IsReadOnly: '1.55',
			}, {
				ItemCode: '03655',
				ItemName: '1#开胶坯头',
				ItemValue: '22-08-23 14:53:16',
				IsDefault: '349',
				P_IsSys: '35.53-37.08',
				P_IsReadOnly: '1.55',
			}, {
				ItemCode: '03655',
				ItemName: '1#开胶坯头',
				ItemValue: '22-08-23 14:53:16',
				IsDefault: '349',
				P_IsSys: '35.53-37.08',
				P_IsReadOnly: '1.55',
			},
		]
	});

	const polTableRef2 = ref(null); //表格ref
	//表格配置
	const columns2 = ref([
		{ label: '实绩发送', key: 'ItemCode', width: '100', align: 'center' },
		{ label: '铸坏状态', key: 'ItemName', align: 'center' },
		{ label: '二级坯号', key: 'ItemValue', align: 'center' },
		{ label: '打号状态', key: 'IsDefault', align: 'center' },
		{ label: '计划打号号码', key: 'P_IsSys', width: '130', align: 'center' },
		{ label: '实际打号号码', key: 'P_IsReadOnly', width: '130', align: 'center' },
		{ label: '铸流序号', key: 'Status', align: 'center' },
		{ label: '铸坯类型', key: 'SortNo', align: 'center' },
		{ label: '铸坯去向', key: 'daotai', align: 'center' },
		{ label: '实际铸坯长度', key: 'zhengchang', width: '130', align: 'center' },
		{ label: '切割时间', key: 'feipeishuliang', width: '150', align: 'center' },
		{ label: '断面', key: 'feipeizhongliang', align: 'center' },
		{ label: '计划重量', key: 'feipeizhongliang2', align: 'center' },
		{ label: '实际重量', key: 'feipeizhongliang3', align: 'center' },
		{ label: 'QES结果', key: 'feipeizhongliang4', width: '100', align: 'center' },
		{ label: '二级炉次', key: 'feipeizhongliang5', align: 'center' },
		{ label: '熔炼号', key: 'feipeizhongliang6', align: 'center' },
	]);

	//表格配置
	const tableOpt2 = ref({
		columns: columns2.value,
		localData: [{
				ItemCode: '未发送',
				ItemName: '产生中',
				ItemValue: '1009000',
				IsDefault: '出坯辊道',
				P_IsSys: '20186470101',
				P_IsReadOnly: '20186470101',
				Status: '第1流',
				SortNo: '正常',
				daotai: '冷床',
				zhengchang: '0.92',
				feipeishuliang: '2022/8/23 16:23',
				feipeizhongliang: '410X530',
				feipeizhongliang2: '1.56',
				feipeizhongliang3: '1.56',
				feipeizhongliang4: '正常坯',
				feipeizhongliang5: '20220108',
				feipeizhongliang6: '20220108'
			},
			{
				ItemCode: '未发送',
				ItemName: '产生中',
				ItemValue: '1009000',
				IsDefault: '出坯辊道',
				P_IsSys: '20186470101',
				P_IsReadOnly: '20186470101',
				Status: '第1流',
				SortNo: '正常',
				daotai: '冷床',
				zhengchang: '0.92',
				feipeishuliang: '2022/8/23 16:23',
				feipeizhongliang: '410X530',
				feipeizhongliang2: '1.56',
				feipeizhongliang3: '1.56',
				feipeizhongliang4: '正常坯',
				feipeizhongliang5: '20220108',
				feipeizhongliang6: '20220108'
			},
			{
				ItemCode: '未发送',
				ItemName: '产生中',
				ItemValue: '1009000',
				IsDefault: '出坯辊道',
				P_IsSys: '20186470101',
				P_IsReadOnly: '20186470101',
				Status: '第1流',
				SortNo: '正常',
				daotai: '冷床',
				zhengchang: '0.92',
				feipeishuliang: '2022/8/23 16:23',
				feipeizhongliang: '410X530',
				feipeizhongliang2: '1.56',
				feipeizhongliang3: '1.56',
				feipeizhongliang4: '正常坯',
				feipeizhongliang5: '20220108',
				feipeizhongliang6: '20220108'
			},
			{
				ItemCode: '未发送',
				ItemName: '产生中',
				ItemValue: '1009000',
				IsDefault: '出坯辊道',
				P_IsSys: '20186470101',
				P_IsReadOnly: '20186470101',
				Status: '第1流',
				SortNo: '正常',
				daotai: '冷床',
				zhengchang: '0.92',
				feipeishuliang: '2022/8/23 16:23',
				feipeizhongliang: '410X530',
				feipeizhongliang2: '1.56',
				feipeizhongliang3: '1.56',
				feipeizhongliang4: '正常坯',
				feipeizhongliang5: '20220108',
				feipeizhongliang6: '20220108'
			},
			{
				ItemCode: '未发送',
				ItemName: '产生中',
				ItemValue: '1009000',
				IsDefault: '出坯辊道',
				P_IsSys: '20186470101',
				P_IsReadOnly: '20186470101',
				Status: '第1流',
				SortNo: '正常',
				daotai: '冷床',
				zhengchang: '0.92',
				feipeishuliang: '2022/8/23 16:23',
				feipeizhongliang: '410X530',
				feipeizhongliang2: '1.56',
				feipeizhongliang3: '1.56',
				feipeizhongliang4: '正常坯',
				feipeizhongliang5: '20220108',
				feipeizhongliang6: '20220108'
			},
			{
				ItemCode: '未发送',
				ItemName: '产生中',
				ItemValue: '1009000',
				IsDefault: '出坯辊道',
				P_IsSys: '20186470101',
				P_IsReadOnly: '20186470101',
				Status: '第1流',
				SortNo: '正常',
				daotai: '冷床',
				zhengchang: '0.92',
				feipeishuliang: '2022/8/23 16:23',
				feipeizhongliang: '410X530',
				feipeizhongliang2: '1.56',
				feipeizhongliang3: '1.56',
				feipeizhongliang4: '正常坯',
				feipeizhongliang5: '20220108',
				feipeizhongliang6: '20220108'
			},
			{
				ItemCode: '未发送',
				ItemName: '产生中',
				ItemValue: '1009000',
				IsDefault: '出坯辊道',
				P_IsSys: '20186470101',
				P_IsReadOnly: '20186470101',
				Status: '第1流',
				SortNo: '正常',
				daotai: '冷床',
				zhengchang: '0.92',
				feipeishuliang: '2022/8/23 16:23',
				feipeizhongliang: '410X530',
				feipeizhongliang2: '1.56',
				feipeizhongliang3: '1.56',
				feipeizhongliang4: '正常坯',
				feipeizhongliang5: '20220108',
				feipeizhongliang6: '20220108'
			},
			{
				ItemCode: '未发送',
				ItemName: '产生中',
				ItemValue: '1009000',
				IsDefault: '出坯辊道',
				P_IsSys: '20186470101',
				P_IsReadOnly: '20186470101',
				Status: '第1流',
				SortNo: '正常',
				daotai: '冷床',
				zhengchang: '0.92',
				feipeishuliang: '2022/8/23 16:23',
				feipeizhongliang: '410X530',
				feipeizhongliang2: '1.56',
				feipeizhongliang3: '1.56',
				feipeizhongliang4: '正常坯',
				feipeizhongliang5: '20220108',
				feipeizhongliang6: '20220108'
			},
			{
				ItemCode: '未发送',
				ItemName: '产生中',
				ItemValue: '1009000',
				IsDefault: '出坯辊道',
				P_IsSys: '20186470101',
				P_IsReadOnly: '20186470101',
				Status: '第1流',
				SortNo: '正常',
				daotai: '冷床',
				zhengchang: '0.92',
				feipeishuliang: '2022/8/23 16:23',
				feipeizhongliang: '410X530',
				feipeizhongliang2: '1.56',
				feipeizhongliang3: '1.56',
				feipeizhongliang4: '正常坯',
				feipeizhongliang5: '20220108',
				feipeizhongliang6: '20220108'
			},
			{
				ItemCode: '未发送',
				ItemName: '产生中',
				ItemValue: '1009000',
				IsDefault: '出坯辊道',
				P_IsSys: '20186470101',
				P_IsReadOnly: '20186470101',
				Status: '第1流',
				SortNo: '正常',
				daotai: '冷床',
				zhengchang: '0.92',
				feipeishuliang: '2022/8/23 16:23',
				feipeizhongliang: '410X530',
				feipeizhongliang2: '1.56',
				feipeizhongliang3: '1.56',
				feipeizhongliang4: '正常坯',
				feipeizhongliang5: '20220108',
				feipeizhongliang6: '20220108'
			},
			{
				ItemCode: '未发送',
				ItemName: '产生中',
				ItemValue: '1009000',
				IsDefault: '出坯辊道',
				P_IsSys: '20186470101',
				P_IsReadOnly: '20186470101',
				Status: '第1流',
				SortNo: '正常',
				daotai: '冷床',
				zhengchang: '0.92',
				feipeishuliang: '2022/8/23 16:23',
				feipeizhongliang: '410X530',
				feipeizhongliang2: '1.56',
				feipeizhongliang3: '1.56',
				feipeizhongliang4: '正常坯',
				feipeizhongliang5: '20220108',
				feipeizhongliang6: '20220108'
			},
		]
	});
</script>

<style lang="scss" scoped>
	.slicing-details-box {
		position: relative;

		.btn-box {
			position: fixed;
			top: 85px;
			right: 20px;
		}
	}
</style>